<template>
  <a-layout>
    <a-layout-content style="padding: 24px 50px; min-height: 280px;">
      <a-space size="4">
        <a-button type="primary" @click="add" size="large">新增</a-button>
      </a-space>
      <a-table
               :data-source="level1"
               :row-key="record => record.id"
               :loading="loading"
               :pagination="false"
               @change="handleTableChange"
      >
        <a-table-column title="名称" data-index="name" ></a-table-column>
        <a-table-column title="父分类" data-index="parent" v-slot="{record}">
            {{ getCategoryName(record.parent) }}
        </a-table-column>
        <a-table-column title="顺序" data-index="sort" ></a-table-column>
        <a-table-column title="操作" key="action" >
            <template v-slot="{text, record}">
              <a-space size="small">
                <a-button type="primary" @click="edit(record)">编辑</a-button>
                <a-popconfirm
                    title="确认要删除吗？删除后不可恢复"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="handleDelete(record)"
                >
                  <a-button type="primary" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
        </a-table-column>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
      title="分类表单"
      v-model:visible="editVisible"
      :confirm-loading="editConfirmLoading"
      @ok="editHandleOk"
      okText="提交"
      cancelText="取消"
  >
    <a-form :model="category" :label-col="{span: 6}" :wrapper-col="{span:14}">
      <a-form-item label="名称">
        <a-input v-model:value="category.name" />
      </a-form-item>
      <a-form-item label="父分类">
<!--        <a-input v-model:value="category.parent" />-->
        <a-select
            ref="select"
            v-model:value="category.parent"
            style="width: 120px"
        >
          <a-select-option value="0">无</a-select-option>
          <a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="c.id == category.id">{{c.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="顺序">
        <a-input v-model:value="category.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, ref} from 'vue';
import axios from 'axios'
import { message } from 'ant-design-vue';
import {Tool} from "@/util/tool.ts";

export default defineComponent({
  setup() {
    const categorys = ref();
    const param = ref({});
    const loading = ref(false);

    const level1 = ref();
    // 查询所有数据
    const handleQuery = (params) => {
      loading.value = true;
      axios.get("/category/list", {params}).then((response) => {
        const data = response.data;
        loading.value = false;
        if (data.code == 200){
          categorys.value = data.data;
          level1.value = Tool.array2Tree(categorys.value, 0);
        } else {
           message.error(data.message)
        }
      });
    };
    const handleTableChange = (pagination) =>{
        handleQuery();
    }

    // 编辑
    const editVisible = ref(false);
    const editConfirmLoading = ref(false);
    const category = ref();

    const editHandleOk = () =>{
      editConfirmLoading.value = true;
      axios.post("/category/save", category.value).then( (resp) => {
        editVisible.value = false;
        editConfirmLoading.value = false;
        if (resp.data.code == 200) {
          handleQuery();
        } else{
          message.error("编辑失败")
        }
      })
    }

    const edit = (record) => {
      editVisible.value = true;
      category.value = Tool.copy(record);
    }

    const add = () => {
      editVisible.value = true;
      category.value = {};
    }

    const handleDelete = (record) => {
       let id = record.id;
        axios.delete("/category/delete/" + id).then( (resp) => {
          if (resp.data.code == 200) {
            handleQuery();
          } else {
            message.error("删除失败")
          }
        })
    }

    const onSearch = (name) => {
      handleQuery({
        name
      })
    }

    const getCategoryName = (id) => {
      let result = "";
      level1.value.forEach( (e) => {
        if (e.id == id){
          result = e.name;
        }
      });
      return result || ""; // == "" ? "无" : result;
    }


    return {
      level1,
      loading,
      handleQuery,
      handleTableChange,
      editVisible,
      editConfirmLoading,
      editHandleOk,
      edit,
      category,
      add,
      handleDelete,
      param,
      onSearch,
      getCategoryName
    };
  },
  mounted() {
    let that = this;
    this.handleQuery();
  },

  components: {
    SmileOutlined,
    DownOutlined,
  },
});

</script>


<style scoped>
</style>